<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>授权登陆页面</title>
    <meta deviceName="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/havcs/css/weui.min.css"/>
    <link rel="stylesheet" href="/havcs/css/weuix.css"/>
    <link rel="stylesheet" href="/havcs/css/jquery-weui.min.css"/>
    <link rel="stylesheet" href="/havcs/css/materialdesignicons.min.css" type="text/css"/>
    <link rel="shortcut icon" href="/havcs/images/favicon.ico" type="image/x-icon"/>
    <script src="/havcs/js/vue.min.js"></script>
    <script src="/havcs/js/vue-resource.min.js"></script>
    <script src="/havcs/js/vue-router.min.js"></script>
    <script src="/havcs/js/ha.js"></script>
    <script src="/havcs/js/jquery.min.js"></script>
    <script src="/havcs/js/jquery-weui.min.js"></script>
    <style>
        .page-hd-title {
            text-align: center;
            font-size: 20px;
            color: #3cc51f;
            font-weight: 400;
            margin: 0 15%;
        }
        .blank {
            height: 2.0em;
            display:block;
        }
        .weui-cell{
            padding: 10px 15px;
        }
        .weui-loadmore{
            font-size: 17px;
        }
    </style>
</head>
<body ontouchstart  class="page-bg">
<div id="app">
    <div class="page-hd" >
        <h1 class="page-hd-title">
                {{ notice.title }}
        </h1>
        <div class="page-hd-desc">
    
        </div>
        <div class="weui-cells__title">公告</div>
        <div class="weui-cells"> 
            <div class="weui-cell">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                <ul id="notices">
                    <li><a href='https://jq.qq.com/?_wv=1027&k=5mCE2MH' target="_blank">使用中遇到问题请加QQ群307773400反馈</a></li>
                    <li v-for="item in notice.noticeList" style="display:none"><a v-bind:href='item.url' target="_blank">{{item.text}}</a></li>
                </ul>
                </div>
                <div class="weui-cell__ft">
                    <i class="weui-icon-info-circle"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="blank"></div>
    <div class="weui-loadmore">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">您即将授权 "{{client_id}}" 访问 Home Assistant 实例</span>
    </div>
    <form method="post" name="form" @submit.prevent="onSubmit">
        <div class="weui-cells__title">用户登录（Home Assistant用户）</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">用户名：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="username" placeholder="请输入用户名" required/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">密码：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="password" v-model="password" placeholder="请输入密码" required/>
                </div>
            </div>
        </div>
        <div class="blank"></div>
        <div class="weui-btn-area">
            <!-- <a href="javascript:document.form.submit();" class="weui-btn weui-btn_primary">登陆</a> -->
            <input type="submit" class="weui-btn weui-btn_primary" value = "登陆">
        </div>
    </form>

    <div class="blank"></div>
    <div class="weui-footer">
        <p class="weui-footer__links">
            <a href="https://ljr.im/articles/plugins-havcs-edible-instructions/" class="weui-footer__link">>介绍&教程<</a>
            <a href="https://jq.qq.com/?_wv=1027&k=5mCE2MH" class="weui-footer__link">交流QQ群：307773400</a>
        </p>
        <p class="weui-footer-text">Copyright &copy; 2019-<script>document.write(new Date().getFullYear());</script> ljr.im</p>
    </div>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
        notice:{
            title:'Home Assistant Voice Control Service - 智能音箱接入Home Assistant方案',
            noticeList:[],
        },
        username: '',
        password: '',
        client_id: ''
  },
    created:function(){
        this.client_id = this.getQueryString('client_id');
        this.getNotice();
  },
    methods: {
        getNotice(){
            const that=this;   
            var url ='https://havcs.ljr.im:8123/account/service.php?v=getClientNotice';
            this.$http.post(
                url,
                {},
                {emulateJSON:true}
                ).then(
                function (res) {
                    if(res.data.code=="ok"){
                        that.notice=res.data.data;
                    }else{
                        // $.toast(res.data.Msg, "forbidden");
                    }
                },function (err) {
                    // console.log(err.status);
                    // $.toast("网络错误", "cancel");
                }
            );
        },
        onSubmit(){
            const that=this;
            this.$http.post(
                window.location.href,
                {   username: this.username,
                    password: this.password
                },
                {emulateJSON:true}
                ).then(
                function (res) {
                    if(res.data.code=="ok"){
                        window.location.href=res.data.data.location
                    }else{
                        $.toast(res.data.Msg, "forbidden");
                    }
                },function (err) {
                    // console.log(err.status);
                    $.toast("网络错误", "cancel");
                }
            );
        },
        getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            var q = window.location.pathname.substr(1).match(reg_rewrite);
            if(r != null){
                return decodeURIComponent(r[2]);
            }else if(q != null){
                return decodeURIComponent(q[2]);
            }else{
                return null;
            }
        },
        parseQuery(url) {
            let o = {};
            let queryString = url.split("?")[1];
            if (queryString) {
                queryString.split("&").forEach(item => {
                let [key, val] = item.split("=");
                val = val ? decodeURIComponent(val) : true;
                if (o.hasOwnProperty(key)) {
                    o[key] = [].concat(o[key], val);
                } else {
                    o[key] = val;
                }
                });
            }
            return o;
        }
    }
});
$(function(){
    setInterval("noticeSwitch('notices',1000)",5000);
}
);
function noticeSwitch(objId, time) {
    obj= $("#"+objId);
    if(obj.children("li").length ===1){
        return;
    }
    if(obj.find("li:last").is(":visible") || obj.children("li:visible").length ===0){
        obj.find("li:first").fadeIn(time).addClass("in");
        obj.find("li:last").hide();
    }else{
        obj.find("li:visible").addClass("in");
        obj.find("li.in").next().fadeIn(time);
        $("li.in").hide().removeClass("in");
    }
}

</script>
</body>
</html>